<template>
    <div>
        <h1>嵌套路由</h1>
        <router-link to="./content1" tag="button">content1</router-link>
        <router-link to="./content2" tag="button">content2</router-link>
        <router-view></router-view>
        <hr>
        <h1>通过AXIOS进行前后端交互</h1>
        <button @click="getInfo">get info</button>
        <p>歌手的昵称: {{nickname}}</p>
    </div>
</template>

<script>
import axios from 'axios'
import {cloudmusic} from '../serve'
export default {
    data(){
        return{
            nickname: ''
        }
    },
    methods: {
        getInfo() {
            let _this = this;
            //axios.get(cloudmusic+'?type=lyric&id=28012031')
            axios.get(cloudmusic, {
                params: {
                    type: 'lyric',
                    id: '28012031'
                }
            })
            .then(function (response) {
                console.log(response);
                _this.nickname = response.data.transUser.nickname
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },
}
</script>

<style scoped>

</style>